<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geometry</title>
    <style>
    html, body {
        height: 100%;
    }

    #graphContainer {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: url('./images/grid.gif');
        cursor: default;
    }
    </style>
</head>

<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"></div>
</body>

<!-- Sets the basepath for the library if not in same directory -->
<script>
const mxBasePath = '../static/mxgraph';
</script>

<!-- Loads and initializes the library -->
<script src="../mxClient.js"></script>
<script>
function main(container) {
  // 禁用鼠标右键
  mxEvent.disableContextMenu(container);
  const graph = new mxGraph(container);
  // 开启区域选择
  new mxRubberband(graph);
  const parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();
  try {
    // 相对画布定位
    graph.insertVertex(parent, null, 'A', 50, 20, 80, 30);
    // 相对父级定位
    const v_1 = graph.insertVertex(parent, null, 'B', 170, 20, 100, 200);
    const v_2 = graph.insertVertex(v_1, null, 'C', 0.5, 1, 80, 30, '', true);
    // 线条label定位
    const v1 = graph.insertVertex(parent, null, 'Hello,', 320, 20, 80, 30);
    const v2 = graph.insertVertex(parent, null, 'World!', 500, 150, 80, 30);
    const e1 = graph.insertEdge(parent, null, '30%', v1, v2);
    // relative position，以线条中点为中心
    e1.geometry.x = 1; // [-1,1] 调整 label 沿连接线的位置
    e1.geometry.y = 100; // 调整label 在正交线上的距离

    const v3 = graph.insertVertex(parent, null, 'Hello,', 320, 320, 80, 30);
    const v4 = graph.insertVertex(parent, null, 'World!', 500, 450, 80, 30);
    const e2 = graph.insertEdge(parent, null, '30%', v3, v4);
    // relative 必须为 true，false 无效
    e2.geometry.relative = false;
    e2.geometry.x = 1;
    e2.geometry.y = 400;
  } finally {
    graph.getModel().endUpdate();
  }
}
</script>
</html>
